<template>
    <el-dialog title="切换课程确认" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false"
        :close-on-press-escape="false" :show-close="false" center class="course-switch-confirm-dialog">
        <div class="dialog-content">
            <div class="warning-icon">
                <el-icon style="font-size: 48px; color: #e6a23c;">
                    <i class="el-icon-warning"></i>
                </el-icon>
            </div>

            <div class="message-content">
                <h3>确认切换课程？</h3>
                <p class="warning-text">
                    您当前已选择了 <strong>{{ selectedKnowledgeCount }}</strong> 个知识点，
                    {{ actionType === 'switch' ? '切换课程' : '关闭面板' }}将会清空这些选择。
                </p>
                <p class="sub-text">此操作不可恢复，请确认是否继续？</p>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="medium">
                取消
            </el-button>
            <el-button type="warning" @click="handleConfirm" size="medium">
                确认{{ actionType === 'switch' ? '切换' : '关闭' }}
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'CourseSwitchConfirm',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        selectedKnowledgeCount: {
            type: Number,
            default: 0
        },
        actionType: {
            type: String,
            default: 'switch', // 'switch' 或 'close'
            validator: value => ['switch', 'close',''].includes(value)
        }
    },
    data() {
        return {
            dialogVisible: false
        }
    },
    watch: {
        visible(newVal) {
            this.dialogVisible = newVal;
        },
        dialogVisible(newVal) {
            if (!newVal) {
                this.$emit('update:visible', false);
            }
        }
    },
    methods: {
        // 确认操作
        handleConfirm() {
            this.$emit('confirm');
            this.dialogVisible = false;
        },

        // 取消操作
        handleCancel() {
            this.$emit('cancel');
            this.dialogVisible = false;
        }
    }
}
</script>

<style scoped>
.course-switch-confirm-dialog {
    border-radius: 8px;
}

.dialog-content {
    text-align: center;
    padding: 20px 0;
}

.warning-icon {
    margin-bottom: 20px;
}

.message-content h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.warning-text {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
}

.warning-text strong {
    color: #e6a23c;
    font-weight: 600;
}

.sub-text {
    margin: 0;
    font-size: 13px;
    color: #909399;
    line-height: 1.5;
}

.dialog-footer {
    text-align: center;
    padding-top: 20px;
}

.dialog-footer .el-button {
    min-width: 80px;
    margin: 0 8px;
}

/* 对话框样式覆盖 */
:deep(.el-dialog) {
    border-radius: 8px;
}

:deep(.el-dialog__header) {
    padding: 20px 20px 0 20px;
    text-align: center;
}

:deep(.el-dialog__title) {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

:deep(.el-dialog__body) {
    padding: 10px 20px 0 20px;
}

:deep(.el-dialog__footer) {
    padding: 0 20px 20px 20px;
}
</style>
